﻿<!DOCTYPE html><!--表示为H5-->

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>HTML语法</title>
    <!--内部样式表-->
    <style type="text/css">
        h1 {
            color: red
        }

        p {
            color: blue
        }

        .cities {
            background-color: black;
            color: white;
            margin: 20px;
            padding: 20px;
        }

        span.red {
            color: red;
        }
        header {
            background-color: black;
            color: white;
            text-align: center;
            padding: 5px;
        }

        nav {
            line-height: 30px;
            background-color: #eeeeee;
            height: 300px;
            width: 100px;
            float: left;
            padding: 5px;
        }

        section {
            width: 350px;
            float: left;
            padding: 10px;
        }

        footer {
            background-color: black;
            color: white;
            clear: both;
            text-align: center;
            padding: 5px;
        }

    </style>
    <!--<base> 标签为页面上的所有链接规定默认地址或默认目标（target）-->
    <base href="http://www.w3school.com.cn/images/" />
    <base target="_blank" />
    <!--<link> 标签定义文档与外部资源之间的关系。-->
    <!--如外联样式表-->
    <!--<link rel="stylesheet" type="text/css" href="mystyle.css" />-->
    <!--元数据（metadata）是关于数据的信息。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务-->
    <meta name="description" content="HTML Basic" />
    <meta name="author"
          content="Lychen">
</head>
<body>
    <a name="top">顶部</a>
    <p>HTML 会自动地在块级元素前后添加一个</p>
    <h1>额外的空行</h1>
    <br /><!--换行-->
    <p>比如段落、标题元素前后</p>
    <hr /><!--水平线-->
    <h2>文本格式化标签</h2>
    <b>粗体字</b>
    <em>重文字</em>
    <i>斜体字</i>
    <small>小号字</small>
    <strong>加重语句</strong>
    <sub>下标字</sub>
    <sup>上标字</sup>
    <ins>插入字</ins>
    <del>删除字</del>
    <hr />
    <code>Computer code</code>
    <br />
    <kbd>Keyboard input</kbd>
    <br />
    <tt>Teletype text</tt>
    <br />
    <samp>Sample text</samp>
    <br />
    <var>Computer variable</var>
    <br />

    <p>
        <b>注释：</b>这些标签常用于显示计算机/编程代码。
    </p>
    <pre>
    这是
    预格式文本。
    它保留了      空格
    和换行。
    </pre>
    <!--缩写,鼠标放上显示-->
    <abbr title="etcetera">etc.</abbr>
    <br />
    <acronym title="World Wide Web">WWW</acronym>
    <!--条件注释-->
    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->
    <hr />
    <!--<div> 元素没有特定的含义,可用于对大的内容块设置样式属性。-->
    <div class="cities">
        <h2>London</h2>
        <p>
            London is the capital city of England.
            It is the most <span class="red">populous</span> city in the United Kingdom,<!--  <span> 元素是行内元素，能够用作文本的容器-->
            with a metropolitan area of over 13 million inhabitants.
        </p>
    </div>
    <hr />
    <a href="#top">
        <!--假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。-->
        <strong>回到顶部</strong>
    </a>
    <a href="http://www.w3school.com.cn/" target="_blank">新页面打开W3School!</a>
    <hr />
    <img src="boat.gif" alt="如果找不到图片会显示这个" />
    <hr />
    <!--iframe 用于在网页内显示网页。-->
    <iframe src="https://uutool.cn/json2excel/"
            width="600" height="400"></iframe>
    <hr />
    <noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>
    <pre>
    picture.jpg	picture.jpg 位于与当前网页相同的文件夹
    images/picture.jpg	picture.jpg 位于当前文件夹的 images 文件夹中
    /images/picture.jpg	picture.jpg 当前站点根目录的 images 文件夹中
    ../picture.jpg	picture.jpg 位于当前文件夹的上一级文件夹中
    </pre>
    <!--H5提供的布局元素-->
    <header>
        <h1>City Gallery</h1>
    </header>

    <nav>
        London<br>
        Paris<br>
        Tokyo<br>
    </nav>

    <section>
        <h1>London</h1>
        <p>
            London is the capital city of England. It is the most populous city in the United Kingdom,
            with a metropolitan area of over 13 million inhabitants.
        </p>
        <p>
            Standing on the River Thames, London has been a major settlement for two millennia,
            its history going back to its founding by the Romans, who named it Londinium.
        </p>
    </section>

    <footer>
        Copyright W3School.com.cn
    </footer>
</body>
</html>